<template>
   <!-- Left Panel with Reveal effect -->
    <div class="panel panel-left panel-reveal">
        <div class="content-block">
          <!-- 用户信息 -->
          <div class="user clearfix">
            <div class="picbox rd">
              <img class="imgblock rd" src="/static/images/pic.jpg">
            </div>
            <div class="sign">
              <p class="name cen">{{user.name}}</p>
              <p class="cen">
                <i class="iconfont icon-shouji"></i>
                <span>{{user.phone}}</span>
              </p>
            </div>
          </div>

          <!-- 分割线 -->
          <div class="hr"></div>

          <!-- 其他设置 -->
          <div class="sets">
            <div class="set-li">
              <i class="iconfont icon-shoubiao"></i>
              <span>手表管理</span>
              <span class="fr cen" v-if='setSign.watch > 0'>{{setSign.watch}}</span>
            </div>
            <div class="set-li">
              <i class="iconfont icon-gouwuche"></i>
              <span>商城</span>
              <span class="fr cen" v-if='setSign.shop > 0'>{{setSign.shop}}</span>
            </div>
            <div class="set-li">
              <i class="iconfont icon-guanyuwomen"></i>
              <span>关于我们</span>
              <span class="fr cen" v-if='setSign.about > 0'>{{setSign.about}}</span>
            </div>
            <div class="set-li">
              <i class="iconfont icon-ordinaryset"></i>
              <span>系统设置</span>
              <span class="fr cen" v-if='setSign.set > 0'>{{setSign.set}}</span>
            </div>
          </div>
      </div>
    </div>
</template>

<script>
export default {
  props: {
    title: '',
    path: '',
    name: ''
  },
  data () {
    return {
      user: {
        name: '魏思恒',
        phone: '12345678911',
        email: '3183956168@qq.com',
        qq: '3183956168'
      },
      items: [
        {name: '女儿', state: 1},
        {name: '儿子', state: 0}
      ],
      setSign: {
        watch: 4,
        shop: 10,
        about: 0,
        set: 0
      }
    }
  },
  methods: {

  }
}
</script>
<style lang="less">
.panel {
  .user .picbox{ overflow:hidden; width:6rem; height:6rem; margin:0 auto;}
  .sign{ padding:0.5rem 0rem;}
  .name{ font-size:0.75rem; line-height:0.8rem;}
  .phone{ color:#999; font-size:0.59rem; line-height:0.66rem;}
  .hr { margin:0rem 0.3rem; border-bottom: 1px solid rgba(144,144,144,0.4);}
  
  .sets{ padding-top:0.5rem;}
  .set-li {
    i { line-height:2rem;font-size:0.8rem;}
    span{ line-height:2rem;font-size:0.75rem;}
      span:nth-child(2){ padding-left:0.5rem;}
      span:nth-child(3){ min-width:0.8rem; height:0.8rem; margin:0.6rem; padding:0 0.2rem; border-radius:0.4rem; background:#ff3682; font-size:0.52rem; line-height:0.8rem; color:#fff;}
  }
}
</style>
